<template>
    <div>
        <div>
            <h1 class="title">当前持有基金情况</h1>
            <el-icon class="refresh" @click="refresh"><RefreshRight /></el-icon>
        </div>
        <el-table :data="fundTableData" style="width: 100%">
            <el-table-column prop="fundName" label="基金名称" />
            <el-table-column prop="code" label="基金代码" />
            <el-table-column prop="principal" width="60" label="本金" />
            <el-table-column prop="curAsset" label="当前持有" />
            <el-table-column prop="positionGain" label="持有收益" />
            <el-table-column prop="firstHoldTime" min-width="100" label="首次持有" />
            <el-table-column fixed="right" label="操作" min-width="50">
                <template #default="scope">
                    <el-popconfirm
                        confirm-button-text="Yes"
                        cancel-button-text="No"
                        icon-color="#626AEF"
                        title="基金已清仓？是否清空该基金本金记录？"
                        @confirm="deleteRow(scope.row.code)"
                        @cancel="cancelEvent"
                    >
                        <template #reference>
                            <el-button link type="primary">移除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getCurFundAPI, deleteFundAPI } from "src/httpApi/assetHttp";

let fundTableData = ref<any[]>([]);

// 点击删除函数执行
const deleteRow = async (data: number) => {
    const params = {
        code: data,
    };
    const res = await deleteFundAPI(params);
    if (res.code === 200) {
        ElMessage({
            message: "删除成功！",
            type: "success",
        });
        getAllFund();
    } else {
        ElMessage({
            message: "删除失败！",
            type: "error",
        });
    }
};

const refresh = () => {
    getAllFund();
};

const getAllFund = async () => {
    fundTableData.value = [];
    const res = await getCurFundAPI();
    if (res.code === 200) {
        let result = res.result;
        result.forEach((item: any) => {
            item.firstHoldTime = item.firstHoldTime.slice(0, 10);
        })
        fundTableData.value = result;
    }
};

// 移除二次确认取消函数调用
const cancelEvent = () => {
    console.log("cancel!");
};

onMounted(() => {
    getAllFund();
});
</script>

<style scoped>
.title {
    line-height: 24px;
    font-size: 20px;
    display: inline-block;
}
.refresh {
    display: inline-block;
    margin-left: 20px;
    margin-top: -6px;
    font-size: 20px;
    cursor: pointer;
    vertical-align: middle; /* 或 baseline */
}
</style>
